<!DOCTYPE html>
<html>
<head>
    <title>Relativity Frames Diagram</title>
</head>
<body>
<canvas id="physicsDiagram" width="600" height="450"></canvas>
<script>
    const canvas = document.getElementById('physicsDiagram');
    const ctx = canvas.getContext('2d');

    // Clear canvas
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // --- Drawing Functions ---
    // Draws a line with an arrowhead at the end
    function drawArrow(ctx, fromx, fromy, tox, toy, headlen = 10) {
        const dx = tox - fromx;
        const dy = toy - fromy;
        const angle = Math.atan2(dy, dx);
        ctx.beginPath();
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }
    
    // Draws just an arrowhead at a specific point with a given angle
    function drawArrowHead(ctx, x, y, angle, headlen = 10) {
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.lineTo(x - headlen * Math.cos(angle - Math.PI / 6), y - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(x, y);
        ctx.lineTo(x - headlen * Math.cos(angle + Math.PI / 6), y - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }

    // --- Global Style and Coordinates ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1.5;
    
    const o_x = 200;
    const o_prime_x = 300;
    const y_center = 250;
    
    const y_axis_top = 100;
    const y_axis_bottom = 400;
    const x_axis_left = 150;
    const x_axis_right = 520;

    // --- S Frame ---
    ctx.font = '24px "Times New Roman"';
    ctx.fillText('S 系', o_x - 70, y_center - 110);
    ctx.font = 'italic 20px "Times New Roman"';
    drawArrow(ctx, o_x, y_axis_bottom, o_x, y_axis_top);
    ctx.fillText('y', o_x + 20, y_axis_top + 5);
    ctx.fillText('O', o_x - 20, y_center + 20);

    // --- S' Frame ---
    ctx.font = '24px "Times New Roman"';
    ctx.fillText("S' 系", o_prime_x + 50, y_center - 110);
    ctx.font = 'italic 20px "Times New Roman"';
    drawArrow(ctx, o_prime_x, y_axis_bottom, o_prime_x, y_axis_top);
    ctx.fillText("y'", o_prime_x + 20, y_axis_top + 5);
    ctx.fillText("O'", o_prime_x - 20, y_center + 20);

    // --- Shared X-Axis ---
    ctx.beginPath();
    ctx.moveTo(x_axis_left - 50, y_center);
    ctx.lineTo(x_axis_right, y_center);
    ctx.stroke();

    const x_arrow_pos = 380;
    const x_prime_arrow_pos = 440;
    drawArrowHead(ctx, x_arrow_pos, y_center, 0);
    drawArrowHead(ctx, x_prime_arrow_pos, y_center, 0);
    ctx.fillText('x', x_arrow_pos - 30, y_center + 20);
    ctx.fillText("x'", x_prime_arrow_pos - 30, y_center + 20);

    // --- Velocity Vector v ---
    const v_y = y_center - 60;
    drawArrow(ctx, 420, v_y, 480, v_y);
    ctx.fillText('v', 500, v_y);

    // --- Points and Accelerations ---
    const point_dist = 45;
    const a_y = y_center - point_dist;
    const b_y = y_center + point_dist;
    const point_radius = 3.5;

    // Point A
    ctx.beginPath();
    ctx.arc(o_prime_x, a_y, point_radius, 0, 2 * Math.PI);
    ctx.fill();
    ctx.fillText('A', o_prime_x + 20, a_y);

    // Point B
    ctx.beginPath();
    ctx.arc(o_prime_x, b_y, point_radius, 0, 2 * Math.PI);
    ctx.fill();
    ctx.fillText('B', o_prime_x + 20, b_y);
    
    // Acceleration Vectors
    const acc_vec_x = o_prime_x - 40;
    const acc_vec_len = 35;

    // Vector and label for A
    drawArrow(ctx, acc_vec_x, a_y, acc_vec_x, a_y - acc_vec_len);
    ctx.fillText('a', acc_vec_x + 15, a_y - (acc_vec_len/2) + 3);
    ctx.font = 'italic 14px "Times New Roman"';
    ctx.fillText('0', acc_vec_x + 23, a_y - (acc_vec_len/2) + 8);
    ctx.font = 'italic 20px "Times New Roman"';
    
    // Vector and label for B
    drawArrow(ctx, acc_vec_x, b_y, acc_vec_x, b_y + acc_vec_len);
    ctx.fillText('a', acc_vec_x + 15, b_y + (acc_vec_len/2) + 3);
    ctx.font = 'italic 14px "Times New Roman"';
    ctx.fillText('0', acc_vec_x + 23, b_y + (acc_vec_len/2) + 8);

</script>
</body>
</html>